<template>
  <div>
    <div class="chart" ref='chart'>
  </div>
  <div class="word-times-tip" v-if="isshowtip" v-html="tipHTML" :style="wordTipStyle"></div>
  </div>
  
</template>
<style lang="scss">
.empty{
    text-align:center;
    width:100%;
    height:100%;
    color:#ccc;
    font-size:13px;
}
</style>
<style>

.word-times-tip {
  position: fixed;
  left: 0;
  top:0;
  z-index:1000;
  background:#fff;
  user-select: none;
  text-align: center;
  padding: 10px 10px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}
.img_avatar{
  position:relative;
  display:block;
  width:60px;
  height:60px;
  border-radius:40px;
  margin:0 auto;
}
.username{
  position:relative;
  height:22px;
  font-size:13px;
  color:#333;
  line-height:22px;
  text-align:center;
  white-space: nowrap;
}
.relation_item{
  position:relative;
  display:block;
  font-size:13px;
  color:#333;
  line-height:22px;
  text-align:center;
  white-space: nowrap;
}
.interactMode_tooltip{
  position:relative;
  font-size:13px;
  color:#333;
  line-height:22px;
  white-space: nowrap;
}
.interactMode_tooltip .username{
  font-size:14px;
  color:#000;
}
</style>
<script>
import RelationChart from '../../util/d3_chart/relation-chart'
let relationChart = null
export default {
  props: ['chartData'],
  data(){
    return {
       items: {},
       isshowtip: false,
       tipHTML: '',
       wordTipStyle: ''
    }
  },
  computed: {
    element () {
      return this.$refs.chart
    }
  },
  
  methods: {
    renderChart () {
        var _mode = this.items.mode;
      var _groupColors = this.items.groupColors;
      var _indexStudentPost = this.items.indexStudentPost;
      var _indexPostRelation = this.items.indexPostRelation;
      this.element.innerHTML = ''
      // 关联图
      if ((!_indexStudentPost.data) || (_indexStudentPost.data.length <= 0) || (!_indexPostRelation.data) || (_indexPostRelation.data.length <= 0)) {
        this.element.innerHTML = '<div class="empty">暂无数据</div>'
      } else {
        // 排序
        _indexStudentPost.data.sort(function (d1, d2) {
          let iResult = d1['group_id'] > d2['group_id'] ? -1 : 1
          if (d1['group_id'] === d2['group_id']) {
            iResult = Math.max(d1['post_num'], d1['comment_num']) >
              Math.max(d2['post_num'], d2['comment_num']) ? -1 : 1
          }
          return iResult
        })
        var _that = this;
        let data = {
          'username': '',
          children: _indexStudentPost.data
        }
        let links = _indexPostRelation.data
        if (links.length > 0) {
          relationChart = new RelationChart(data, links, {
            container: this.element,
            width: 490,
            height: 500,
            showText: false,
            margin: {
              left: 30,
              right: 30,
              top: 30,
              bottom: 30
            },
            groups: _groupColors,
            links_key: {
              source: 'student1',
              target: 'student2',
              value: 'num'
            },
            linkWidthMax: 1,
            linkDistance: 2,
            linkCharge: -2,
            tension: 0.87,
            IndexKey: 'uid',
            valueKey: 'post_num',
            group_Key: 'group_id',
            disc_key: 'comment_num', // 实心关键字、回帖数量
            circle_key: 'post_num', // 空心圆关键字、发言数量
            onMouseOver: (d, event) => {
              var clientX = event.clientX || event.screenX || event.x;
              var clientY = event.clientY || event.screenY || event.y;
              this.wordTipStyle = 'left:' + (clientX+20) + 'px;top:' + (clientY-60) + 'px';
              
              d.avatar = d.avatar ? d.avatar : this.staticDir + '/icon/avatar.png'
              this.tipHTML = `<div class='interactMode_tooltip'>
                          <img class='img_avatar' src='${d.avatar}'/><span class='username'>${d.username}</span>
                          <div class="relation_item">总发帖数：${d.post_num} | 总回帖数：${d.comment_num}</div>
                          </div>`
              this.isshowtip = true;
            },
            onMouseLeave: () => {
              this.isshowtip = false;
            },
            onLineMouseOver: function(d, i, event){
              var clientX = event.clientX || event.screenX || event.x;
              var clientY = event.clientY || event.screenY || event.y;
              _that.wordTipStyle = 'left:' + (clientX+20) + 'px;top:' + (clientY-50) + 'px';

              let linkData = {}
              if (d[2]) {
                linkData['username1'] = d[0]['username']
                linkData['username2'] = d[2]['username']
                linkData['num'] = this._link_bundle[i]['value']
              } else {
                linkData['username1'] = d['source']['username']
                linkData['username2'] = d['target']['username']
                linkData['num'] = d['value']
              }
              _that.tipHTML = `<div class='interactMode_tooltip'><span class='username'>${linkData.username1}</span><->${linkData.username2} 回帖数：${linkData.num}</div>`
              _that.isshowtip = true;
            },
            onLineMouseLeave: function(d, event) {
              _that.isshowtip = false;
            }
          })
        }
      }
    }
  },
  watch: {
      chartData:{
        immediate: true,
        handler(val){
          this.items = val;
          this.$nextTick(() => {
                this.renderChart();
           });
        }
      }
  },
  mounted () {
    this.items = this.chartData;
    this.$nextTick(() => {
      this.renderChart();
    })
  }
}
</script>
<style lang="scss">
.xueTang_relationChart {
  .disc_circle {
    opacity: .3;
    stroke: none;
  }
  .circle_circle {
    stroke-width: 1px;
    fill: none;
  }
  .link {
    /*stroke-opacity: 0.4;*/
    fill: none;
  }
}
</style>


